<template>
	<div class="edit-popup">
		<popup ref="popupRef" :async="true" title="" width="650px" :clickModalClose="true" @close="handleClose"
			:footershow="false" :showClose="false" customClass="previewDialog">
			<div class="bor">
                <!-- 库存历史名称、从属设备 -->
				<el-form label-width="100px" label-position="right">
					<el-row>
						<el-col :span="span">
							<el-form-item label="名称">
								<fontGoBeyond :text="extend.product.title">
								</fontGoBeyond>
							</el-form-item>
						</el-col>
						<el-col :span="span">
							<el-form-item label="分类">
								<fontGoBeyond :text="booktypefilter(extend.product.cate_name,extend.product.category_id)">
								</fontGoBeyond>
							</el-form-item>
						</el-col>
						<el-col :span="span">
							<el-form-item label="使用仓库">
								<fontGoBeyond :text="extend.product.warehouse_name">
								</fontGoBeyond>
							</el-form-item>
						</el-col>
						<el-col :span="span" >
							<el-form-item label="累计使用数量">
								<fontGoBeyond v-if="extend.product.category_id==15" :text="`${extend.product.quantity_num} ${extend.product.unit_name_15}`">
								</fontGoBeyond>
								<fontGoBeyond v-else :text="`${extend.product.quantity_num} ${extend.product.unit_name}`">
								</fontGoBeyond>
							</el-form-item>
						</el-col>
						<el-col :span="span">
							<el-form-item label="规格">
								<fontGoBeyond :text="extend.product.spec">
								</fontGoBeyond>
							</el-form-item>
						</el-col>
						<el-col :span="span">
							<el-form-item label="型号">
								<fontGoBeyond :text="extend.product.model">
								</fontGoBeyond>
							</el-form-item>
						</el-col>
						<el-col :span="span">
							<el-form-item label="属性一">
								<fontGoBeyond :text="extend.product.alias">
								</fontGoBeyond>
							</el-form-item>
						</el-col>
						<el-col :span="span">
							<el-form-item label="属性二">
								<fontGoBeyond :text="extend.product.other">
								</fontGoBeyond>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row>
						<el-col :span="24">
							<el-form-item label="备注">
								<fontGoBeyond :text="extend.product.remark">
								</fontGoBeyond>
							</el-form-item>
						</el-col>
					</el-row>
				</el-form>
			</div>
			<div v-if="extend.list.length!=0">
				<div style="margin: 10px 0;">存储详情</div>
				<el-row >
					<el-col class="bor" :span="12" v-for="(row,index) in extend.list" :key="index">
						<div>
							{{row.unit_length}}{{extend.product.unit_name_15}}/{{extend.product.unit_name}}
							<span style="margin-left: 10px;">
								{{row.quantity}}{{extend.product.unit_name}}
							</span>
						</div>
					</el-col>
				</el-row>
			</div>
		</popup>
	</div>
</template>
<script lang="ts" setup>
	import {
		adminLists
} from '@/api/water/list'
  import { inventoryHistoryDetail } from "@/api/inventoryHistory/list";
	import Popup from '@/components/popup/index.vue'
	import fontGoBeyond from '@/components/fontGoBeyond/index.vue'

	const emit = defineEmits(['success', 'close'])
	const popupRef = shallowRef < InstanceType < typeof Popup >> ()
	const mode = ref('add')
	const span = ref(12)
	const options = reactive({
		listColumn: [] as any[]
	})
	const extend = reactive({
		product: {
			title: '',
			cate_name: '',
			category_id: '',
			warehouse_name: '',
			quantity: '',
			unit_name: '',
			spec: '',
			model: '',
			alias: '',
			other: '',
			remark: '',
            unit_name_15: ''
		},
		list:{}
	})

	const getOptions = (data: any) => {
		adminLists({
			title: data.title,
			id: data.id,
		}).then((data: any) => {
			extend.product = data.extend.product
			extend.list = data.extend.list
			options.listColumn = data.lists[0]
		})
}
// 库存历史
const getOptionsHistory = (data: any) => {
  inventoryHistoryDetail({
			title: data.title,
			id: data.id,
		}).then((data: any) => {
			extend.product = data.extend.product
			extend.list = data.extend.list
			options.listColumn = data.lists[0]
		})
	}
	const booktypefilter = (list: any, id: any) => {
		if (list) {
			const obj = list.find((val: any) => val.id == id)
			return obj ? obj.name : null
		}
	}

	const open = (type = 'add') => {
		mode.value = type
		popupRef.value?.open()
	}

const setFormData = (data: Record<any, any>, type?: string) => {
    if (type) {
      getOptionsHistory(data)
    }else {
      getOptions(data)
    }
	}

	const handleClose = () => {
		emit('close')
	}


	defineExpose({
		open,
		setFormData
	})
</script>
<style lang="scss" scoped>
	$bor-color:#eeeff0;

	.bor {
		// border-top: 1px solid $bor-color;
		border-left: 1px solid $bor-color;
		// border-right: 1px solid $bor-color;
		border-bottom: 1px solid $bor-color;
		// padding: 0 10px;

	}

	.el-col {
		border-right: 1px solid $bor-color;
		border-top: 1px solid $bor-color;
		align-items: center;
		padding: 7px;
	}

	.el-form-item {
		margin-bottom: 0;
	}

	::v-deep .el-form-item__label {
		border-left: 0;
		border-top: 0;
		border-bottom: 0;
		margin-right: 10px;
	}

	::v-deep .el-col {
		padding: 0px;
	}

	::v-deep .el-dialog__header {
		padding-top: 0;
		padding-bottom: 0;
	}

	.previewDialog {
		background-color: red;

		.el-dialog__header {
			padding-top: 0 !important;
			padding-bottom: 0 !important;
		}

	}

	.fontcolor {
		font-size: 13px;
	}
</style>
